<template>
<div class="home page" ref="userTable">USER
    <!--搜索--START-->
    <div class="search-form border p-20-20-0-20 card-shadow">
      <auto-form :setting="searchFormSetting" :form="searchFormGroup" :button="searchFormButton"
                 @search="searchFormTableData" @delete="handleClickDeleteRecord" @create="handleClickAddRecord"
                 />
    </div>
    <!--搜索--END-->

    <!--列表--START-->
    <div class="list-table border p-20 m-20-0-0-0 card-shadow p-20-20-0-20">
      <auto-table is-checked :title="tableTitle" :data="mockTableData" :event="tableButton"
                  @edit="handleClickTableEdit" @checkRow="handleTableCheckRow" @delete="handleClickTableDelete"/>
      <!--分页-->
      <paging :total="pageTotal" :page="currentPage" :size="pageSize" @page="handleClickPage" @size="handleClickSize"/>
    </div>
    <!--列表--END-->

    <!--弹出层--START-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <auto-form v-if="dialogVisible"
                 :setting="dialogFormSetting"
                 :form="dialogFormGroup"
                 :button="dialogFormButton"
                 :default-form="dialogForm"
                 @create="handleClickDialogFormCreate"
                 @cancel="handleClickCancel"
                 @update="handleClickDialogFormEdit"/>
    </el-dialog>
</div>
</template>

<script>
import autoForm from "@/views/setting/user/components/autoForm/index.vue";
import autoTable from "@/views/setting/user/components/autoTable/index.vue";
import paging from "@/views/setting/user/components/paging/index.vue";
import autoTableMixins from '@/views/setting/user/components/autoTable/mixins.js'
import {
  searchFormSetting,
  tableTitle,
  tableButton,
  searchFormButton,
  searchFormGroup,
  dialogFormButton,
  dialogFormGroup,
  dialogFormSetting,
} from '@/views/setting/user/index'
import axios from 'axios'
import MD5 from 'js-md5'

axios.defaults.baseURL = '/api'

// const mockTableData = []

export default {
  name: 'index',
  mixins: [autoTableMixins],
  data() {
    return {
      dialogTitle: "添加用户",
      tableTitle,
      tableButton,
      dialogFormButton,
      dialogFormGroup,
      dialogFormSetting,
      searchFormSetting,
      searchFormButton,
      searchFormGroup,
      mockTableData: [],
      dialogForm: {},
      // 分页
      pageTotal: 20,
      currentPage: 1,
      pageSize: 20,
      dialogVisible: false,
      uploadVisible: false
    }
  },
  components: {paging, autoTable, autoForm},
  methods: {
    // 处理弹出层表单编辑
    handleClickDialogFormEdit(form) {
      form.password = MD5(form.password)
      axios.post('/setting/user/update/', form).then(
          response => {
            this.dialogVisible = false;
            this.searchTableData();
            this.$message({
              message: response.data.message,
              type: 'success',
              showClose: true
            });
          },
          // 失败
          error => {
            this.$message.error({message: error.response.data.message, showClose: true});
          });
    },
    handleClickTableEdit(index, row) {
      this.dialogTitle = '编辑用户信息'
      this.dialogVisible = true
      row.password = null
      this.dialogForm = row
      this.dialogFormButton = [
        {name: '确定', event: 'update', type: 'primary'},
        {name: '取消', event: 'cancel'}
      ]
    },
    // 添加手术记录
    handleClickDialogFormCreate(form) {
      form.password = MD5(form.password)
      axios.post('/setting/user/create/', form).then(
          response => {
            this.dialogVisible = false;
            this.searchTableData();
            this.$message({
              message: response.data.message,
              type: 'success',
              showClose: true
            });
          },
          // 失败
          error => {
            this.$message.error({message: error.response.data.message, showClose: true});
          });
    },
    handleClickAddRecord() {
      this.dialogTitle = '添加用户'
      this.dialogVisible = true
      this.dialogFormButton = [
        {name: '确定', event: 'create', type: 'primary'},
        {name: '取消', event: 'cancel'}
      ]
      // this.dialogForm = row
    },
    // 查询列表
    searchFormTableData(form) {
      axios.get('/setting/user/search/', {
            params: {
              page: this.currentPage,
              page_size: this.pageSize,
              name: form.name
            }
          }
      ).then(
          response => {
            const responseData = JSON.parse(response.data)
            const tableList = [];
            responseData.records.forEach(item => {
              let tableItem = {
                "id": item.id,
                "password": 'MD5加密:' + item.password,
                "last_login": item.last_login,
                "is_superuser": item.is_superuser,
                "username": item.username,
                "name": item.name,
                "email": item.email,
                "role": item.role,
                "phone": item.phone,
                "is_active": item.is_active,
                "date_joined": item.date_joined,
              };
              tableList.push(tableItem)
            })
            this.mockTableData = tableList;
            this.pageTotal = responseData.count;
          },
          // 失败
          error => {
            this.$message.error({message: error.response.data.message, showClose: true});
          })
    },
    searchTableData() {
      axios.get('/setting/user/search/', {
            params: {
              page: this.currentPage,
              page_size: this.pageSize,
              name: ''
            }
          }
      ).then(
          response => {
            const responseData = JSON.parse(response.data)
            const tableList = [];
            responseData.records.forEach(item => {
              let tableItem = {
                "id": item.id,
                "password": 'MD5加密:' + item.password,
                "last_login": item.last_login,
                "is_superuser": item.is_superuser,
                "username": item.username,
                "name": item.name,
                "email": item.email,
                "role": item.role,
                "phone": item.phone,
                "is_active": item.is_active,
                "date_joined": item.date_joined,
              };
              tableList.push(tableItem)
            })
            this.mockTableData = tableList;
            this.pageTotal = responseData.count;
          },
          // 失败
          error => {
            this.$message.error({message: error.response.data.message, showClose: true});
          })
    },
    // 当前页
    handleClickPage(count) {
      this.currentPage = count
      this.searchTableData();
    },
    // 每页条数
    handleClickSize(count) {
      this.pageSize = count
      this.searchTableData();
    },
    // 处理批量删除
    handleClickDeleteRecord() {
      if (this.checkRow) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const id_list = [];
          this.checkRow.forEach(item => {
            id_list.push(item.id);
          });
          axios.delete('/setting/user/delete/selects/', {
            params: {
              ids: id_list
            }
          }).then(
              response => {
                this.$message({
                  message: response.data.message,
                  type: 'success',
                  showClose: true
                })
                // 清空勾选的数据
                this.checkRow = null
                this.searchTableData()
              },
              // 失败
              error => {
                this.$message.error({message: error.response.data.message, showClose: true});
              })
          // location.reload()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.$message({
          type: 'warning',
          message: '至少勾选一列'
        })
      }
    },
    // 处理表格列删除
    handleClickTableDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('/setting/user/delete/', {
          params: {
            id: row.id
          }
        }).then(
            response => {
              this.$message({
                message: response.data.message,
                type: 'success',
                showClose: true
              })
              this.searchTableData();
            },
            // 失败
            error => {
              this.$message.error({message: error.response.data.message, showClose: true});
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClickCancel() {
      this.uploadVisible = false
      this.dialogVisible = false
    }
  },
  mounted() {
    this.searchTableData()
  }
}
</script>

<style scoped>

</style>
